<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>车辆质量投诉列表</title>
		<script src="js/v2.6.10/vue.js"></script>
		<script src="js/v2.6.10/elementui.js"></script>
		<script src="js/v2.6.10/axios.js"></script>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<style>
			body {
				font-family: Arial, sans-serif;
			}

			h2 {
				text-align: center;
				margin-bottom: 20px;
			}

			.search-container {
				display: flex;
				justify-content: center;
				margin-bottom: 20px;
			}

			.el-table {
				margin-top: 20px;
			}

			.el-dialog {
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
			}

			/* 自定义按钮样式 */
			.el-button {
				padding: 8px 16px;
				border-radius: 4px;
				transition: all 0.3s ease;
				/* 添加过渡效果 */
			}

			.el-button--primary {
				background-color: #409EFF;
				color: white;
			}

			.el-button--primary:hover {
				background-color: #66b1ff;
				/* 鼠标悬停时的背景颜色 */
			}

			.el-table el-table-column {
				background-color: lightskyblue
					/* 偶数行背景色 */
			}

			.el-table .el-table__body tr:nth-child(even) {
				background-color: lightgreen
					/* 偶数行背景色 */
			}
		</style>
	</head>

	<body>
		<div id="app">
			<h2>车辆质量投诉列表</h2>
			<div class="search-container">
				<span style="margin-top: 10px;">品牌：</span>
				<el-select v-model="find" placeholder="--请选择--">
					<el-option value="" label="--请选择--"></el-option>
					<el-option v-for="item in options1" :key="item.value" :label="item.label"
						:value="item.label"></el-option>
				</el-select>
				&nbsp;&nbsp;
				<el-button @click="searchMessage" type="success" class="el-button">查询</el-button>
				<el-button @click="add()" type="primary" class="el-button">添加投诉</el-button>
			</div>
			<hr />
			<el-table :header-cell-style="{ background: '#c4f6ea' }" border :data="tableData" style="width: 100%;">
				<el-table-column prop='id' label="投诉编号" width="180px"></el-table-column>
				<el-table-column prop='brandName' label="投诉品牌" width="180px"></el-table-column>
				<el-table-column prop='problem' label="投诉问题" width="200px"></el-table-column>
				<el-table-column prop='carType' label="投诉车系" width="180px"></el-table-column>
				<el-table-column prop='complaintsTime' label="投诉时间" width="180px"></el-table-column>
				<el-table-column prop='status' label="投诉状态" width="180px">
					<!-- 投诉状态 0代表信息审核 1代表厂家受理 -->
					<template #default="scope">
						{{scope.row.status === 0? '信息审核' : '厂家受理'}}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="300px">
					<template #default="scope">
						<el-button type="text" @click="toggleStatus(scope.row)">切换状态</el-button>
						<el-button type="text" @click="edit(scope.row)">修改</el-button>
						<el-button type="text" @click="handledelete(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination @current-change="currentChange" :page-size="size" :page-sizes="[5, 10, 20]"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
			<el-dialog title="添加投诉页面" :visible.sync="dialogVisible" width="40%">
				<el-form ref="forms" :rules="rules" :model="forms" label-width="80px">
					<el-form-item label="投诉品牌">
						<el-select v-model="forms.brandId" placeholder="请选择">
						    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
						    </el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="投诉问题" prop="problem">
						<el-input v-model="forms.problem"></el-input>
					</el-form-item>
					<el-form-item label="投诉车系" prop="carType">
						<el-input v-model="forms.carType"></el-input>
					</el-form-item>
					<el-form-item label="投诉时间" prop="complaintsTime">
						<el-input v-model="forms.complaintsTime"></el-input>
					</el-form-item>
					<el-form-item label="投诉状态" prop="status">
						<el-radio v-model="forms.status" label="0">信息审核</el-radio>
						<el-radio v-model="forms.status" label="1">厂家受理</el-radio>
					</el-form-item>
					<el-form-item label="相关操作">
						<el-button @click="dialogVisible = false">返回</el-button>
						<el-button type="primary" @click="submitForm('forms')">提交</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
		</div>

		<script>
			new Vue({
				el: "#app",
				data: {
					rules: {
						brandId: [{
							required: true,
							message: '请选择投诉品牌',
							trigger: 'blur'
						}],
						problem: [{
							required: true,
							message: '请输入投诉问题',
							trigger: 'change'
						}],
						carType: [{
							required: true,
							message: '请输入投诉车系',
							trigger: 'blur'
						}],
						complaintsTime: [{
							required: true,
							message: '请输入投诉时间',
							trigger: 'blur'
						}],
						status: [{
							required: true,
							message: '请选择投诉状态',
							trigger: 'blur'
						}]
					},
					id: "",
					dialogVisible: false,
					tableData: [],
					find: "",
					options1: [],
					forms: {
						brandId: "",
						problem: "",
						carType: "",
						complaintsTime: "",
						status: ""
					},
					size: 5,
					page: 1,
					pageSizes: [5, 10, 20],
					total: 0
				},
				methods: {
					// 提交按钮
					submitForm(formName) {
						this.$refs[formName].validate((valid) => {
							if (valid) {
								var datePattern = /^(\d{4})-(\d{2})-(\d{2})$/
								if (!datePattern.test(this.forms.complaintsTime)) {
									alert("日期格式不合法!格式为yyyy-MM-dd");
									return;
								}
								if (this.id) {
									// 修改
									axios.post("http://localhost:8082/reviewDemo/updateVehiclecomplaints", {
										id: this.id,
										brandId: this.forms.brandId,
										problem: this.forms.problem,
										carType: this.forms.carType,
										complaintsTime: this.forms.complaintsTime,
										status: this.forms.status
									}).then((result) => {
										this.$alert(result.data, '消息提示', {
											confirmButtonText: '确定',
											callback: action => {}
										});
										this.dialogVisible = false;
										this.fetchTousu();
									}).catch((error) => {
										console.error("编辑投诉失败：", error);
									});
								} else {
									// 新增
									axios.post("http://localhost:8082/reviewDemo/insertVehiclecomplaints", this
										.forms).then((result) => {
										this.$alert(result.data, '消息提示', {
											confirmButtonText: '确定',
											callback: action => {}
										});
										this.dialogVisible = false;
										this.fetchTousu();
									}).catch((error) => {
										console.error("新增投诉失败：", error);
									});
								}
							} else {
								console.log('error submit!!');
								return false;
							}
						});
					},
					// 切换状态
					toggleStatus(row) {
						const currentStatus = row.status;
						const newStatus = currentStatus === 0 ? 1 : 0;
						const statusText = newStatus === 0 ? '信息审核' : '厂家受理';
						this.$confirm(`您确定要将此投诉状态切换为 ${statusText} 吗？`, '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							axios.get("http://localhost:8082/reviewDemo/updateComplaintStatus", {
								params: {
									status: newStatus,
									id: row.id
								}
							}).then((response) => {
								console.log(response.data);
								if (response.data) {
									this.$message({
										type: 'success',
										message: '状态切换成功!'
									});
									row.status = newStatus;
								} else {
									this.$message.error('状态切换失败!');
								}
							}).catch((error) => {
								console.error(error);
								this.$message.error('状态切换失败!');
							});
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消操作'
							});
						});
					},
					// 搜索
					searchMessage() {
						this.fetchTousu();
					},
					// 切换页码
					currentChange(val) {
						this.page = val;
						this.fetchTousu();
					},
					// 查询投诉信息
					fetchTousu() {
						let that = this;
						if (this.find == null) {
							this.find = "";
						}
						axios.get('http://localhost:8082/reviewDemo/selectVehiclecomplaintsList', {
							params: {
								page: this.page,
								pageSize: this.size,
								brandName: this.find
							}
						}).then((response) => {
							console.log("打印出来的投诉数据：", response.data);
							let data = response.data.data.vehiclecomplaintsPageInfo.list;
							
							data.forEach(item => {
								let brand = that.options1.find(option => option.value === item.brandId);
								if (brand) {
									item.brandName = brand.label;
								}
							});
							that.tableData = data;
							that.total = response.data.data.vehiclecomplaintsPageInfo.total;
						}).catch((error) => {
							console.error("查询投诉列表失败：", error);
						});
					},
					// 修改 fetchBrandList 方法
					fetchBrandList() {
					    return new Promise((resolve, reject) => {
					        axios.get('http://localhost:8082/reviewDemo/selectBrands').then((result) => {
					            console.log("查询出来的品牌信息：", result.data.data.brands);
					            this.options1 = result.data.data.brands.map(brand => ({
					                label: brand.brandName,
					                value: brand.brandId // 确保value是字符串类型
					            }));
					            resolve();
					        }).catch((error) => {
					            console.error("查询品牌列表失败：", error);
					            reject(error);
					        });
					    });
					},
					edit(row) {
					    console.log("当前行数据:", row); // 检查整行数据
					    console.log("当前行的brandName:", row.brandName); // 检查brandName
					
					    // 确保options1已加载
					    if (this.options1.length === 0) {
					        this.fetchBrandList().then(() => {
					            this.setEditForm(row);
					        });
					    } else {
					        this.setEditForm(row);
					    }
					},
					setEditForm(row) {
					    // 根据brandName查找对应的brandId
					    const brand = this.options1.find(item => item.label === row.brandName);
					    if (brand) {
					        this.forms.brandId = brand.value; // 设置对应的brandId
					    } else {
					        console.warn("未找到匹配的品牌:", row.brandName);
					        this.forms.brandId = ""; // 如果没有匹配项，设置为空
					    }
					
					    this.dialogVisible = true;
					    this.forms.problem = row.problem;
					    this.forms.carType = row.carType;
					    this.forms.complaintsTime = row.complaintsTime;
					    this.forms.status = row.status.toString();
					    this.id = row.id;
					
					    // 强制更新视图
					    this.$nextTick(() => {
					        this.$forceUpdate();
					    });
					},
				
					// 新增按钮
					add() {
						this.dialogVisible = true;
						this.forms = {
							brandId: "",
							problem: "",
							carType: "",
							complaintsTime: "",
							status: ""
						};
						this.id = "";
					},
					// 删除
					handledelete(row) {
						console.log("要删除的投诉id:", row.id);
						this.$confirm(`您确定要删除此投诉吗？`, '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							axios.get("http://localhost:8082/reviewDemo/deleteVehiclecomplaints?id=" + row.id)
								.then((response) => {
									console.log("删除请求的响应:", response.data);
									if (response.data) {
										this.$message({
											type: 'success',
											message: '删除成功!'
										});
										this.fetchTousu();
									} else {
										this.$message.error('删除失败!');
									}
								}).catch((error) => {
									console.error("删除请求出错:", error);
									this.$message.error('删除失败!');
								});
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消操作'
							});
						});
					}
				},
				mounted() {
					this.fetchTousu();
					this.fetchBrandList();
				}
			})
		</script>
	</body>

</html>